<style>
    .search{border:1px solid #ccc;padding-top: 15px;margin-bottom: 20px;padding-left: 20px}
    form input[type='text']{height: 34px;width: 170px}
    .re-time input[type='text']{width: 135px;height: 35px}
    .re-time select{height: 35px;width: 80px;margin-right: 5px;}
    .callPhone{position: relative}
    .callPhone .call-type{display: none;position: absolute;width: 320px;height: 30px;padding: 10px;left:-200px;top:16px;background: #fff;z-index:99}
    .callPhone:hover .call-type{display: block}
</style>
<section class="content">
    <div class="search">
        <form role="form">
            <div class="row">
                <div class="col-xs-5 col-md-5">
                    <div class="form-group">
                        <span>用户姓名/手机号/身份证号：</span>
                        <input type="text" ng-model="vipModel.usernameOrPhone" >
                    </div>
                </div>
                <div class="col-xs-3 col-md-3">
                    <div class="form-group">
                        <span>套餐名：</span>
                        <input type="text" ng-model="vipModel.goodsName">
                    </div>
                </div>
                <div class="col-xs-1">
                    <input type="button" class="btn-primary btn" value="查询" ng-click="getVipList(1)">
                </div>


            </div>
        </form>
    </div>
    <div class="table-box">
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>序号</th>
                <th>套餐名</th>
                <th>用户名</th>
                <th>手机号</th>
                <th>账户余额</th>
                <th>身份证号</th>
                <th>激活日期</th>
                <th>有效期</th>
                <th>截止日期</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <tr ng-repeat="n in vipList">
                <td>{{$index+1}}</td>
                <td>{{n.goodsName}}</td>
                <td>{{n.userName}}</td>
                <td>{{n.cellPhone}}</td>
                <td>{{n.balance | currency:"￥"}}</td>
                <td>
                    <span ng-if="n.idCard">
                         {{n.idCard | idcard}}
                     </span>
                    <span ng-if="!n.idCard">
                        未填写
                    </span>
                </td>
                <td>{{n.startTime | date:"yyyy-MM-dd HH:mm:ss"}}</td>
                <td>{{n.liveTime || 0 }}月</td>
                <td>{{n.endTime | date:"yyyy-MM-dd"}}</td>
                <td>
                    <a  href="javascript:;"  data-detail="{{n}}" class="callPhone">通话<span class="caret"></span>
                        <div class="call-type">
                            <button class="btn btn-primary btn-sm" ng-click="callUser($event)">拨打用户</button>
                            <button class="btn btn-primary btn-sm" ng-click="callDoctor($event)">拨打医生</button>
                            <button class="btn btn-primary btn-sm" ng-click="callDouble($event)">双向通话</button>
                            <button class="btn btn-primary btn-sm" ng-click="conversationList($event)">通话记录</button>
                        </div>
                    </a>|
                    <a  href="javascript:;"  data-toggle="modal" data-target="#myModal1" data-detail="{{n}}" ng-click="reconversation($event)">预约</a>
                </td>
            </tr>
            <tr ng-if="vipList.length<=0">
                <td colspan="10" class="text-center">暂无数据</td>
            </tr>
            </tbody>
        </table>
        <div class="page-function" ng-if="vipList.length>0">
        </div>
    </div>
    <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel1" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel1">预约</h4>
                </div>
                <div class="modal-body re-time">
                    <div class="row">
                        <div class="col-xs-5">确定时间：</div>
                    </div>
                    <div class="row">
                        <div class="col-xs-4"><input type="text" class="date-picker" name="date" value="{{orderTime}}"></div>
                        <div class="col-xs-3">
                            <select name="hour" class="hour">
                                <option value="08">08</option>
                                <option value="09">09</option>
                                <option value="10">10</option>
                                <option value="11">11</option>
                                <option value="12">12</option>
                                <option value="13">13</option>
                                <option value="14">14</option>
                                <option value="15">15</option>
                                <option value="16">16</option>
                                <option value="17">17</option>
                                <option value="18">18</option>
                                <option value="19">19</option>
                                <option value="20">20</option>
                                <option value="21">21</option>
                                <option value="21">21</option>
                                <option value="22">22</option>
                            </select>时
                        </div>
                        <div class="col-xs-3">
                            <select name="sec" class="sec">
                                <option value="00">00</option>
                                <option value="10">10</option>
                                <option value="20">20</option>
                                <option value="30">30</option>
                                <option value="40">40</option>
                                <option value="50">50</option>
                            </select>分</div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" ng-click="commitReTime()">确定</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
</section>